<template>
  <div class="join">
    <div class="loading" v-show="isLoading">加载中...</div>
    <div class="topTips" v-if="deleteIco&&!isLoading">
      <div class="tipsLeft">
        <div class="tLIcon"><i class="el-icon-circle-check-outline"></i></div>
        <div>此二维码安全，您可放心长按扫码进群。</div>
      </div>
      <div class="tipsRight" @click="deleteIcon"><i class="el-icon-close"></i></div>
    </div>
    <div class="content" v-show="!isLoading">
      <div class="title" v-show="isShowImage">{{name}}</div>
      <div class="desc" v-show="isShowImage">{{description}}</div>
      <div class="qrcode" v-show="isShowImage">
        <img width="100%" height="100%" :src="imageData" alt="">
      </div>
      <div v-if="isShowImage">
        <div class="tip">无法加群，请联系微信：
          <el-tag
            size="small"
            v-clipboard="() => wechat"
            v-clipboard:success = "clipboardSuccessHandler"
            v-clipboard:error = "clipboardErrorHandler"
          >
            {{wechat}}
          </el-tag>
          <p class="copy">点击微信号即可复制</p>
        </div>
      </div>
      <div class="error-tip" v-else>
        <p style="text-align: center">当前人数已满，请联系管理员：{{wechat}}</p>
        <div style="display: flex;justify-content: center;martgin-top:50px;">
          <el-tag
            v-clipboard="() => copyText"
            v-clipboard:success = "clipboardSuccessHandler"
            v-clipboard:error = "clipboardErrorHandler"
          >复制微信号</el-tag>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  /* eslint-disable */
  import { Toast } from 'mint-ui';
  import func from '../util/function';
  import service from '../service/join';
  import CONSTANT from '../constant/common';
  import cookie from '../lib/cookie';
  import Http from '../lib/request';
  import qunkuDot from './qunkuDot.json'
  import qs from 'querystring';

  export default {
    data() {
      return {
        isLoading: true,
        wechat: 'xxxxx',
        openId: cookie(CONSTANT.COOKIE_USER_OPENID) || '',
        description: '',
        isShowImage: true,
        text: '',
        title: '',
        name: '', // '这里是图片，这里最大三行文字。恭喜您，还有少数分班名额，以下是您的专属班级群二维码，赶紧扫码入群，更多详情请查看群内公告',
        imageData: '', // 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
        deleteIco: true,
      };
    },
    computed: {
      copyText() {
        return this.wechat
      },
    },
    mounted() {

      const queryObj = this.$route.query
      const { appId, componentAppId, groupCollectionId, channelId, wxScope, dataUrl } = this.$route.query;
      this.saveInfo(this.$route.query);
      if (window.sessionStorage.getItem('isAuth')==1) {
        service.getJoinInfo({
          groupCollectionId,
        }).then((info) => {
          this.title = info.title;
          this.description = info.description;
          this.isShowImage = info.isShowImage;
          this.name = info.name;
          this.imageData = info.imageData;
          this.text = info.text;
          this.wechat = info.wechat;
          this.isLoading = false;

          if(dataUrl) {
            const data = {
              groupCollectionId: groupCollectionId,
              groupCollectionName: info.name,
              groupId: info.groupId,
              groupName: info.groupName,
              openId: info.openid,
              ...queryObj
            }
            delete data.dataUrl
            delete data.wxScope
            delete data.componentAppId
            let url = dataUrl.replace(/%3A/g,':').replace(/%2F/g,'/')
            // 参数处理把对象转成参数形式的字符串
            let params = ''
            Object.keys(data).map((item)=> {
              params+=`${item}=${data[item]}&`
            })
            let newParams = params.substr(0,params.length-1);
            Http.get(`${url}?${newParams}`).then((res) => {
              if (res.status !== 200) {
                throw new Error();
              }
              return res.data || {};
            }).catch(() => {
            });
          }
        })
      } else {
        if (!(appId && componentAppId)) {
          alert('请求参数有误，请检查再试');
          this.isLoading = false;
          return;
        }
        const data = {
          appid: appId,
          componentAppid: componentAppId,
          redirectUri: encodeURIComponent(`${window.location.href.split('#')[0]}#/callback/wechat?appId=appId`),
          scope: wxScope==1?'snsapi_userinfo':'snsapi_base',
        };
        const url = func.wechatAuthUrl(data);
        console.log(`redirect to wechat :${url}`);
        window.location.href = url;
      }
    },
    methods: {
      clipboardSuccessHandler() {
        Toast({
          message: '微信号复制成功',
          iconClass: 'el-icon-success',
        });
      },
      clipboardErrorHandler() {

      },
      saveInfo(queryObj) {
        cookie('queryObj', JSON.stringify(queryObj));
      },
      deleteIcon() {
        this.deleteIco = false;
      },
    },
  };
</script>
<style lang="less" scoped>
  .join {
    .content {
      color: #333;
      padding: 25px;
      .title {
        font-size: 21px;
        line-height: 21px;
        text-align: left;
        font-weight: bold;
      }
      .desc {
        margin: 10px 0 25px 0;
        color: #999;
      }
      .qrcode {
        text-align: center;
        max-width: 640px;
        margin-bottom: 16px;
      }
      .tip {
        text-align: center;
        font-size: 12px;
        line-height: 18px;
      }
      .error-tip {
        margin-top: 160px;
        font-size: 12px;
        text-align: center;
      }
    }
  }
  .topTips{
    font-size: 13px;
    background: #9ed35f;
    display: flex;
    justify-content: space-between;
    padding: 7px 10px;
    color: #fff;
    align-items: center;
    .tipsLeft{
      display: flex;
      align-items: center;
    }
    i{
      font-size: 16px;
    }
    .tLIcon{
      margin-bottom: -2px;
      margin-right: 5px;
    }
    .tipsRight{
      margin-bottom: -2px;
    }
  }
  .copy{
    text-align: center;
    font-size: 10px;
    color: #999;
    margin-top: 5px;
  }
</style>

